<template>
  <div>
    <div class="filter">
      <div class="filter_item">
        姓名：<Input
          prefix="ios-contact"
          clearable
          placeholder="Enter name"
          style="width: auto"
          v-model="emplName"
        />
      </div>
      <div class="filter_item">
        性别：<Select v-model="sex" clearable style="width: 200px">
          <Option v-for="item in sexs" :value="item.value" :key="item.key">{{
            item.value
          }}</Option>
        </Select>
      </div>
      <div class="filter_item">
        部门：<Select
          v-model="dept"
          style="width: 200px"
          @on-open-change="getDeptList"
          @on-change="deptChange"
        >
          <Option
            v-for="item in deptNames"
            :value="item.deptName"
            :key="item.id"
            >{{ item.deptName }}</Option
          >
        </Select>
      </div>
      <div class="filter_item">
        工号：<Input
          v-model="emplAcco"
          placeholder="请输入工号"
          clearable
          style="width: 300px"
        />
      </div>
      <div class="filter_item">
        入职时间：
        <DatePicker
          type="daterange"
          split-panels
          placeholder="Select date"
          style="width: 200px"
          @on-change="rzdateChange"
        ></DatePicker>
      </div>
      <div class="filter_item">
        转正时间：
        <DatePicker
          type="daterange"
          split-panels
          placeholder="Select date"
          style="width: 200px"
          @on-change="zzdateChange"
        ></DatePicker>
      </div>
      <div>
        <div class="filter_item">
          <Button type="primary" @click="showAddModel">新增</Button>
        </div>
      </div>
      <div class="filter_item">
        <Button type="primary" @click="getAllEmpl">查询</Button>
      </div>
      <div class="filter_item">
        <Upload
          action=""
          :before-upload="handleBeforeUpload"
          accept=".xls, .xlsx"
        >
          <Button
            icon="ios-cloud-upload-outline"
            :loading="uploadLoading"
            @click="handleUploadFile"
            >读取文件</Button
          >
          <div style="margin-top:10px">
          <span>{{ name }}</span>
          </div>

        </Upload>
      </div>
      <div class="filter_item">
        <Button @click="importData" type="info" style="margin-left: 15px"
          >上传</Button
        >
      </div>
    </div>
    <div class="table">
      <Table ref="table" :columns="emplColumns" :data="emplList" border></Table>
    </div>
    <div class="page">
      <Page :total="total" @on-change="pageChange" show-elevator />
    </div>
    <Modal
      v-model="showAddEmplModel"
      title="新增"
      width="1300"
      :closable="false"
      :mask-closable="false"
    >
      <AddEmployee ref="add" @on-close-modal="closeThisAddModel" />
      <div slot="footer">
        <Button @click="closeAddModal">取消</Button>
        <Button type="primary" @click="closeAddModal">确定</Button>
      </div>
    </Modal>
    <Modal
      v-model="showUpdateEmplModel"
      title="更新"
      width="1300"
      :closable="false"
      :mask-closable="false"
    >
      <UpdateEmployee
        ref="UpdateEmployee"
        @on-close-modal="closeThisUpdateModel"
      />
      <div slot="footer">
        <Button @click="closeUpdateModal">取消</Button>
        <Button type="primary" @click="closeUpdateModal">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import AddEmployee from "./AddEmployee.vue";
import UpdateEmployee from "./UpdateEmployee";
export default {
  components: {
    AddEmployee,
    UpdateEmployee,
  },
  data() {
    return {
      name: "",
      uploadLoading: false,
      tableLoading: false,
      showRemoveFile: false,
      emplName: "",
      sexs: [
        {
          key: "男",
          value: "男",
        },
        {
          key: "女",
          value: "女",
        },
      ],
      sex: "",
      file: null,
      dept: "",
      deptNames: [],
      phone: "",
      identy: "",
      emplAcco: "",
      password: "",
      emplList: [],
      rzdate: [],
      zzdate: [],
      pageNo: 1,
      total: 0,
      showAddEmplModel: false,
      showUpdateEmplModel: false,
      showProgress: false,
      loadingProgress: 0,
      tableData: [],
      tableTitle: [],
      excel: null,
      emplColumns: [
        {
          type: "index",
          title: "序号",
          align: "center",
          width: 80,
        },
        {
          key: "emplName",
          title: "姓名",
          align: "center",
        },
        {
          key: "sex",
          title: "性别",
          align: "center",
        },

        {
          key: "phone",
          title: "电话",
          align: "center",
        },
        {
          key: "emplAcco",
          title: "工号",
          align: "center",
        },
        {
          key: "deptName",
          title: "部门",
          align: "center",
        },
        {
          key: "rzdate",
          title: "入职时间",
          align: "center",
        },
        {
          key: "zzdate",
          title: "转正时间",
          align: "center",
        },
        {
          key: "lzdate",
          title: "离职时间",
          align: "center",
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.showUpdateEmplModel = true;
                      this.$refs.UpdateEmployee.emplName = params.row.emplName;
                      this.$refs.UpdateEmployee.sex = params.row.sex;
                      this.$refs.UpdateEmployee.phone = params.row.phone;
                      this.$refs.UpdateEmployee.identy = params.row.identy;
                      this.$refs.UpdateEmployee.deptName = params.row.deptName;
                      this.$refs.UpdateEmployee.emplAcco = params.row.emplAcco;
                      this.$refs.UpdateEmployee.rzdate = params.row.rzdate;
                      this.$refs.UpdateEmployee.emplId = params.row.emplId;
                    },
                  },
                },
                "编辑"
              ),
            ]);
          },
        },
      ],
    };
  },
  methods: {
    getDeptList() {
      this.$axios.post("/api/dept/getAllDept").then((res) => {
        console.log(res.data.data);
        this.deptNames = res.data.data;
      });
    },
    deptChange(e) {
      this.deptName = e;
    },
    pageChange(e) {
      this.pageNo = e;
      this.getAllEmpl();
    },
    getAllEmpl() {
      this.$axios
        .post("/api/empl/getEmpl", {
          emplName: this.$data.emplName ? this.$data.emplName : null,
          deptName: this.$data.dept ? this.$data.dept : null,
          sex: this.sex ? this.sex : null,
          emplAcco: this.emplAcco ? this.emplAcco : null,
          pageNo: this.$data.pageNo,
          rzBegin: this.$data.rzdate[0] ? this.$data.rzdate[0] : null,
          rzEnd: this.$data.rzdate[1] ? this.$data.rzdate[1] : null,
          zzBegin: this.$data.zzdate[0] ? this.$data.zzdate[0] : null,
          zzEnd: this.$data.zzdate[1] ? this.$data.zzdate[1] : null,
        })
        .then((res) => {
          let data = res.data.data.records;
          this.emplList = data;
          this.total = data.size;
        });
    },
    showAddModel() {
      this.showAddEmplModel = true;
    },
    closeAddModal() {
      this.showAddEmplModel = false;
    },
    rzdateChange(e) {
      this.rzdate = e;
    },
    zzdateChange(e) {
      this.zzdate = e;
    },
    closeUpdateModal() {
      this.showUpdateEmplModel = false;
    },
    closeThisAddModel(e) {
      this.showAddEmplModel = e;
      this.getAllEmpl();
    },
    closeThisUpdateModel(e) {
      this.showUpdateEmplModel = e;
      this.getAllEmpl();
    },
    importData() {
      const _this = this;
      if (this.file) {
        console.log(this.file);
        var formData = new FormData();
        formData.append("file", this.file);
        this.$axios.post("/api/empl/importEmpl", formData).then((res) => {
          console.log(res.data.data);
        });
      }
    },
    initUpload() {
      this.file = null;
      this.showProgress = false;
      this.loadingProgress = 0;
      this.tableData = [];
      this.tableTitle = [];
    },
    handleUploadFile() {
      this.initUpload();
    },
    handleRemove() {
      this.initUpload();
      this.$Message.info("上传的文件已删除！");
    },
    handleBeforeUpload(file) {
      const fileExt = file.name.split(".").pop().toLocaleLowerCase();
      if (fileExt === "xlsx" || fileExt === "xls") {
        this.readFile(file);
        this.file = file;
      } else {
        this.$Notice.warning({
          title: "文件类型错误",
          desc:
            "文件：" +
            file.name +
            "不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。",
        });
      }
      return false;
    },
    // 读取文件
    readFile(file) {
      const reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onloadstart = (e) => {
        this.uploadLoading = true;
        this.tableLoading = true;
        this.showProgress = true;
      };
      reader.onprogress = (e) => {
        this.progressPercent = Math.round((e.loaded / e.total) * 100);
      };
      reader.onerror = (e) => {
        this.$Message.error("文件读取出错");
      };
      reader.onload = (e) => {
        console.log(e);
        console.log(this.file);
        this.$Message.info("文件读取成功");
        this.uploadLoading = false;
        this.tableLoading = false;
        this.showRemoveFile = true;
        this.name = file.name;
      };
    },
    fileChange(e) {
      this.file = e;
      console.log(this.file);
    },
    importExcel() {
      console.log(this.file);
      var formData = new FormData();
      formData.append("file", this.file);
      this.$axios.post("/api/empl/importEmpl", formData).then((res) => {
        console.log(res.data.data);
      });
    },
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
  height: 700;
}
.filter_item {
  margin-left: 30px;
  margin-top: 30px;
  float: left;
}
.table {
  margin-top: 30px;
  width: 1500px;
}
.page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>